<template>
  <div class="login-container">
    <!-- 添加标题 -->
    <h1 class="login-title">东软云医院系统</h1>
    <div class="login-box">
      <el-form :model="form" label-width="auto">
        <el-form-item label="用户名">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="Password">
          <el-input v-model="form.password" show-password />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { ElNotification } from 'element-plus'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { useCounterStore } from "@/stores/counter.js";

// 在 setup 中使用
const router = useRouter()
import service from '@/utils/request'

let form = ref({ username: 'admin', password: 'admin123' })
let counter = useCounterStore()

function login() {
  service.post("/user/login?username=" + form.value.username + "&password=" + form.value.password).then(
      res => {
        if (res.data != null) {
          // 1.将userid存入pinia
          counter.vo_user.value = res.data

          // 2.路由跳转
          router.replace({ path: "/" })
        } else {
          ElMessage.error('用户名或密码错误，请重试！')
        }
      }
  )
}
</script>

<style scoped>
/* 整体容器样式 */
.login-container {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f9; /* 背景颜色 */
}

/* 标题样式 */
.login-title {
  font-size: 36px;
  color: #409eff;
  margin-bottom: 30px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* 登录框样式 */
.login-box {
  background-color: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  width: 350px;
}

/* 表单标签样式 */
.el-form-item__label {
  font-size: 14px;
  color: #333;
}

/* 输入框样式 */
.el-input__inner {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  transition: border-color 0.2s ease-in-out;
}

.el-input__inner:focus {
  border-color: #409eff;
  outline: none;
}

/* 按钮样式 */
.el-button {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
}

.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}

.el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}
</style>